<template>
    <div class="e-table">
          <top-step :stepInfo="steps" />
        <div class="top">
            <div class="left">
                <div class="listTop">
                    <el-button
                        size="small"
                        class="btn-greenYellow"
                        @click="openAddDialog"
                    >
                        新增</el-button>
                </div>
            </div>
            <div class="right">
                <div class="right-div1">
                    <el-input
                        placeholder="输入项目编号"
                        size="small"
                        v-model="pagination.keyWord"
                    >
                        <i slot="suffix" class="el-input__icon el-icon-search" @click="searchData"></i>
                    </el-input>
                </div>
              <!--   <div>
                    <el-button
                        size="small"
                        style="background: #2e61d7; color: #fff"
                        @click="dialogVisibleSearch = true"
                        >高级搜索
                    </el-button>
                </div> -->
            </div>
        </div>
        <el-table
            class="table"
            :data="tableData"
            border
            style="width: 100%"
            :height="tableHeight"
        >
            <el-table-column label="结算编号" min-width="200" show-overflow-tooltip class-name="blue-column"  fixed>
                <template slot-scope="{ row }" >
                    <span @click="tableDbShow(row)">{{row.billNo}}</span>
                </template>
            </el-table-column>
            <!-- <el-table-column
                prop="settleNo"
                label="结算编号"
                min-width="200"
                show-overflow-tooltip
                fixed
            >
            </el-table-column> -->
            <el-table-column
                prop="settleDate"
                label="结算日期"
                width="150"
            >
            </el-table-column>
            <el-table-column
                prop="orgName"
                label="机构"
                align="right"
                width="150"
            >
            </el-table-column>

            <el-table-column
                prop="settleOrg"
                label="结算单位"
                align="right"
                min-width="150"
            >
            </el-table-column>
            <el-table-column
                prop="taxExcluding"
                label="不含税结算金额（元）"
                align="right"
                width="180"
            >
            </el-table-column>
            <el-table-column
                prop="totalTaxPrice"
                label="税价合计（元）"
                align="right"
                width="150"
            >
            </el-table-column>
            <el-table-column
                prop="totalSettleAmount"
                label="累计结算金额（元）"
                align="right"
                width="180"
            >
            </el-table-column>
             <el-table-column
                prop="settleType"
                label="结算类型"
                align="right"
                width="150"
            >
            </el-table-column>
             <el-table-column
                prop="businessType"
                label="业务类型"
                align="right"
                width="150"
            >
            </el-table-column>
             <el-table-column
                prop="sourceNo"
                label="源单编号"
                align="right"
                width="150"
                class-name="blue-column"
            >
            <template slot-scope="{ row }" >
                    <span @click="goToOtherPages(row)">{{row.sourceNo}}</span>
            </template>
            </el-table-column>
            <el-table-column
                prop="evaluateGrade"
                label="评价"
                width="150"
            >
                <template slot-scope="{ row }">
                    <span>{{row.remarks }}</span>
                </template>
            </el-table-column>
             <el-table-column
                prop="state"
                label="状态"
                align="right"
                width="150"
            >
                <template slot-scope="{ row }">
                    {{shuziShow(row.state)}}
                </template>
            </el-table-column>
             <el-table-column
                label="红单状态"
                align="right"
                width="150"
            >
            <!-- <el-input :style="redBillStateStyle"> -->
                <template slot-scope="{ row }">
                    <span
                    style="color: blue; cursor: pointer"
                    @click="redClick(row)"
                    >
                    {{redBillStateFun(row.redStatus)}}
                    </span>
                </template>
            </el-table-column>
             <el-table-column
                prop="billSource"
                label="来源"
                align="right"
                width="150"
            >
            </el-table-column>
        </el-table>
        <ComPagination
            :total="totalPage"
            :pageSize.sync="pagination.limit"
            :currentPage.sync="pagination.page"
            @currentChange="listByEntity"
            @sizeChange="listByEntity"
            class="bottomSetting"
        />
        <!-- mask -->
        <elDialog  :dialogVisibleSearch="dialogVisibleSearch" @heightSharchClose="heightSharchClose" @heightSharch="heightSharch"/>
    </div>
</template>

<script>
import request from '@/api/PCCset/apply.js'
import ComPagination from '@/components/pagination/pagination.vue'
import elDialog from '@/pages/equipment/equipPlan/commonSearch/elDialog.vue'
import { vueDom, debounce } from '@/utils/common.js'
import TopStep from '@/components/topstep/topstep.vue'
// import { openAppClient } from '@/utils/common'
export default {
    data () {
        return {
            reddata: {
                'currPage': 0,
                'list': [
                    {
                        'billId': '',
                        'billNo': '',
                        'businessTypeValue': '',
                        'evaluateGrade': '',
                        'orgName': '',
                        'redStatus': 0,
                        'relationId': '',
                        'settleDate': '',
                        'settleOrg': '',
                        'settleType': '',
                        'sourceNo': '',
                        'state': 0,
                        'taxExcluding': 0,
                        'totalSettleAmount': 0,
                        'totalTaxPrice': 0,
                        'billSource': ''
                    }
                ],
                'pageSize': 0,
                'totalCount': 0,
                'totalPage': 0
            },
            isAttention: true,
            tableData: [],
            loading: false,
            MouseEnterId: 0,
            buySettleDTO: '',
            dialogVisibleSearch: false,
            pagination: {
                'keyWord': '',
                'limit': 10,
                'page': 1,
                'search': {
                    'endTime': '',
                    'orgId': '',
                    'settlCompany': '',
                    'startTime': '',
                    'states': []
                },
            },
            totalPage: 0, //总页数
            tableHeight: 0,
            auditState: {}, //流程按钮显示状态
            auditParams: {
                'billId': this.$route.query.billid,
                'billType': 6095,
                'freeNextUnitIndex': 0,
                'freeNextUser': '',
                'isPass': true,
                'isShareInAudit': true,
                'opinion': ''
            },
            steps: [
                {
                    description: '临时需用计划',
                    http: ''
                },
                {
                    description: '物资采购合同',
                    http: ''
                },
                {
                    description: '周材入库',
                    http: ''
                },
                {
                    description: '周材验收',
                    http: ''
                },
                {
                    description: '周材采购结算',
                    http: ''
                },
            ],
            billId: this.$route.query.billid,
            billid: this.$route.query.billid,
            relationId: this.$route.query.relationId,
        }
    },
    components: {
        ComPagination,
        elDialog,
        TopStep
    },
    computed: {
        //获取状态
        // statusLable () {
        //     return param => {
        //         const state = this.$store.state.equip.equipData.state
        //         const obj = state.find(x => x.value === Number(param))
        //         return obj.label
        //     }
        // }
    },
    created () {
        this.shuziShow()
        this.redBillStateFun()
        this.searchData()
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 240
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 240
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        //查询列表
        searchData () {
            this.$Ajax
                .httpPost({
                    url: '/turnoversettle/BuySettle/listByEntity',
                    params: this.pagination
                })
                .then(res => {
                    console.log(res)
                    let data = res.list
                    data.forEach(item => {
                        switch (item.redStatus) {
                        case '-1':
                            item.redStatus = ''
                            break
                        case '1':
                            item.redStatus = '冲销中'
                            break
                        case '2':
                            item.redStatus = '已冲销'
                            break
                        case '3':
                            item.redStatus = '红单'
                            break
                        }
                    })
                    this.tableData = data
                    this.totalPage = res.totalCount
                })
        },
        redClick (row) {
            if (row.redStatus == 3) {
                this.auditParams.billId = row.relationId
                // 如果该单据就是红单,则点击时进入源单详情页
                request.PccSetgetCurrentUnitInfo(this.auditParams).then(res => {
                    console.log(res)
                    console.log(this.auditParams)
                    this.$router.push({
                    // path: '/PccSetRed',
                        path: '/NewPlanDetailRed',
                        query: { billid: row.relationId }
                    })
                })
            }else{
                this.auditParams.billId = row.billId
                request.PccSetgetCurrentUnitInfo(this.auditParams).then(res => {
                    console.log(res)
                    if (row.redStatus == -1) {
                        this.$router.push({
                            path: '/NewPlanDetail',
                            query: { billid: row.billId }
                        })
                    } else if (row.redStatus == 1 || row.redStatus == 2) {
                        this.$router.push({
                            path: '/NewPlanShow',
                            query: { billid: row.billId }
                        })
                    }
                })
            }
        },
        //根据类型前往对应页面进行查看
        goToOtherPages (row) {
            const urlObj = {
                //字段返回有误零星采购计划 == '临时需用计划'
                '零星采购计划': '/momentNeedPlanShow',
                '物资采购合同': '/ctMaterialApplyShow',
                '调拨单': '/revolveAllocationShow'
            }
            const url = urlObj[row.businessTypeValue]
            const billid = row.sourceNo
            // openAppClient(
            //     `/${url}?billid=${billid}&isview=true`
            // )
            this.$router.replace({
                path: url,
                query: { billid }
            })
        },
        //状态红单
        redBillStateFun (redStatus) {
            if(redStatus == 1) {
                return '冲销中'
            }else if(redStatus == 2) {
                return '已冲销'
            }else if(redStatus == 3) {
                return '红单'
            }else if(redStatus == -1) {
                return '冲销中'
            }
        },
        //状态数字转换
        shuziShow (state) {
            if(state == -1) {
                return '已删除'
            }else if(state == 0) {
                return '草稿'
            }else if(state == 1) {
                return '审核中'
            }else if(state == 2) {
                return '已审核'
            }else if(state == 5) {
                return '已作废'
            }
        },
        //分页查询
        listByEntity () {
            this.searchData()
        },
        //新增
        openAddDialog () {
            this.$router.push('/NewPlanAdd')
        },
        //选择查看编辑还是查看页面
        tableDbShow (row) {
            console.log(row)
            if(row.redStatus == 3) {
                // this.reddata.list[0].relationId = row.relationId
                this.auditParams.billId = row.billId
                console.log(this.auditParams.billId)
                if(row.state === -1 || row.state === 2 || row.state === 5) {
                    this.$router.push({
                        path: '/NewPlanShowRed',
                        query: { billid: row.billId }
                    })
                }else{
                    // this.auditParams.billId = row.billId
                    console.log(this.auditParams.billId, 'this.auditParams.billId')
                    request.PccSetgetCurrentUnitInfo(this.auditParams).then(res => {
                        console.log(res)
                        this.auditState = res
                        if( this.auditState.canModify == true) {
                            this.$router.push({
                                path: '/NewPlanDetailRed',
                                query: { billid: row.billId }
                            })
                        }else{
                            this.$router.push({
                                path: '/NewPlanShowRed',
                                query: { billid: row.billId }
                            })
                        }
                    })
                }
            // }else if(row.redStatus == -1) {
            }else{
                this.auditParams.billId = row.billId
                if(row.state === -1 || row.state === 2 || row.state === 5) {
                    this.$router.push({
                        path: '/NewPlanShow',
                        query: { billid: row.billId }
                    })
                }else{
                    this.auditParams.billId = row.billId
                    request.PccSetgetCurrentUnitInfo(this.auditParams).then(res => {
                        this.auditState = res
                        if( this.auditState.canModify == true) {
                            this.$router.push({
                                path: '/NewPlanDetail',
                                query: { billid: row.billId }
                            })
                        }else{
                            this.$router.push({
                                path: '/NewPlanShow',
                                query: { billid: row.billId }
                            })
                        }
                    })
                }

            }
        },
        //获取对应ID数据
        PccSetCorresDataHandel () {
            request.PccSetCorresData(this.billId).then(res=>{
                this.tableData = res.list
                this.totalPage = res.totalCount
            })
        },
        // 高级搜索关闭
        heightSharchClose () {
            this.dialogVisibleSearch = false
        },
        //高级搜索
        heightSharch (val) {
            this.pagination = val
            this.searchData()
        }
    }
}
</script>

<style lang="scss" scoped>
.e-table {
    min-height: 97.3vh;
}
::v-deep.el-steps--simple{
    background: #eff2f6;
    margin-bottom: 10px;
}
.dialog-footer {
    text-align: right;
}
</style>
